<template>
  <el-dialog title="新增员工" :visible="showDialog" @close="cancle">
    <el-form ref="myform" :rules="rules" :model="formData" label-width="100px">
      <el-form-item label="姓名" prop="username">
        <el-input
          v-model="formData.username"
          placeholder="1-30个字符"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input
          v-model="formData.mobile"
          placeholder="请输入手机号"
        ></el-input>
      </el-form-item>
      <el-form-item label="入职时间" prop="timeOfEntry">
        <el-date-picker
          v-model="formData.timeOfEntry"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="聘用形式" prop="formOfEmployment">
        <el-select v-model="formData.formOfEmployment" placeholder="请选择">
          <el-option
            v-for="item in typeList"
            :key="item.id"
            :label="item.value"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工号" prop="workNumber">
        <el-input
          v-model="formData.workNumber"
          placeholder="1-20个字符"
        ></el-input>
      </el-form-item>
      <el-form-item class="formitem" label="部门" prop="departmentName">
        <el-input
          v-model="formData.departmentName"
          placeholder="请选择"
          @focus="myfocus"
        ></el-input>
        <el-tree
          class="mytree"
          v-if="showTree"
          :data="deptsList"
          :props="{ label: 'name' }"
          @node-click="nodeClick"
          default-expand-all
          :expand-on-click-node="false"
        >
        </el-tree>
      </el-form-item>
      <el-form-item label="转正时间" prop="correctionTime">
        <el-date-picker
          v-model="formData.correctionTime"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancle">取 消</el-button>
      <el-button @click="submit" type="primary">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
// 导入聘用形式的枚举
import myemployees from "@/api/constant/employees";
import { validateMoblie } from "@/utils/validate";
import { companyDepartmentsApi } from "@/api/departments";
import { addUserApi } from "@/api/employees";
export default {
  props: ["showDialog"],
  data() {
    return {
      formData: {
        username: "", // 用户名称
        mobile: "", // 手机号码
        timeOfEntry: "", // 入职时间
        formOfEmployment: "", // 聘用形式
        workNumber: "", // 工号
        departmentName: "", // 部门
        correctionTime: "" //转正时间
      },
      deptsList: [], //tree树状图的数据源
      showTree: false, //是否显示树状图
      // 枚举聘用形式
      typeList: myemployees.hireType,
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          { min: 1, max: 30, message: "1-30个字符", trigger: "blur" }
        ],
        mobile: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          { validator: validateMoblie }
        ],
        timeOfEntry: [
          { required: true, message: "日期不能为空", trigger: "blur" }
        ],
        formOfEmployment: [
          { required: true, message: "类型不能为空", trigger: "blur" }
        ],
        workNumber: [
          { required: true, message: "工号不能为空", trigger: "blur" }
        ],
        //   部门选择验证
        departmentName: [
          { required: true, message: "部门名称不能为空", trigger: "change" }
        ],
        correctionTime: [
          { required: true, message: "日期不能为空", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    //  取消按钮 & 关闭对话框
    cancle() {
      // 关闭面板
      this.$emit("update:showDialog", false);
      // 清除数据
      this.formData = {
        username: "", // 用户名称
        mobile: "", // 手机号码
        timeOfEntry: "", // 入职时间
        formOfEmployment: "", // 聘用形式
        workNumber: "", // 工号
        departmentName: "", // 部门
        correctionTime: "" //转正时间
      };
    },

    // 获取tree 树状结构的数据源
    async getdeptList() {
      let res = await companyDepartmentsApi();
      this.deptsList = this.trunData(res.depts, "");
    },
    // 定义一个装换数据结构的方法
    trunData(arr, pid) {
      var newArr = [];
      arr.forEach(item => {
        if (item.pid == pid) {
          var children = this.trunData(arr, item.id);
          if (children.length > 0) {
            item.children = children;
          }
          newArr.push(item);
        }
      });
      return newArr;
    },

    // 输入框获取焦点的方法
    myfocus() {
      this.showTree = true;
      // 获取数据源
      this.getdeptList();
    },

    // 点击树形组件 的节点时会触发
    nodeClick(data) {
      // data :当前节点的数据源
      console.log(data);
      // 将name赋值给部门
      this.formData.departmentName = data.name;
      //   关闭面板
      this.showTree = false;
    },

    // 提交按钮
    submit() {
      // 全局验证
      this.$refs.myform.validate(async isOk => {
        if (isOk) {
          // 提交数据
          await addUserApi(this.formData);
          // 关闭面板
          this.$emit("update:showDialog", false);
          //   清空数据
          this.formData = {
            username: "", // 用户名称
            mobile: "", // 手机号码
            timeOfEntry: "", // 入职时间
            formOfEmployment: "", // 聘用形式
            workNumber: "", // 工号
            departmentName: "", // 部门
            correctionTime: "" //转正时间
          };
          //   提示添加成功
          this.$message.success("新增成功");
          // 重新加载数据
          this.$emit("updateData");
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.formitem {
  width: 400px;
  position: relative;
  .mytree {
    position: absolute;
    left: 0;
    z-index: 999;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
}
</style>
